﻿@rendermode InteractiveServer

<div class="home-banner">
    <MSwiper @bind-Index="_carouselValue"
             Style="position: relative"
             Height="@("100%")">
        <MSwiperSlide>
            <MRow NoGutters Style="height: 100%">
                <MCol Cols="12" Lg="6" Class="intro-wrapper">
                    <div class="intro">
                        <div class="intro-title">开源企业级开发者门户&#10;平台工程</div>
                        <div class="intro-subtitle">让开发者聚焦业务价值的实现</div>
                        <div class="intro-actions">
                            <MButton Class="gradual-btn" Text Ripple="false" Href="/stack">了解更多</MButton>
                            <MButton Text Ripple="false" Class="text-capitalize"
                                     Href="https://github.com/masastack" Target="_blank">
                                <MIcon Class="mr-2">mdi-github</MIcon>
                                Github
                            </MButton>
                        </div>
                    </div>
                </MCol>
                <MCol Cols="12" Lg="6" Class="cover-wrapper">
                    <MImage Src="https://cdn.masastack.com/images/banner1.png"
                            Contain
                            Eager
                            Style="margin-left: 36px"
                            Width="@("100%")"
                            Height="@("100%")" />
                </MCol>
            </MRow>
        </MSwiperSlide>
        <MSwiperSlide>
            <MRow NoGutters Style="height: 100%">
                <MCol Cols="12" Lg="6" Class="intro-wrapper">
                    <div class="intro">
                        <div class="intro-title">传统.NET中大型项目&#10;升级宝典</div>
                        <div class="intro-subtitle">使用MASA Stack对现有.NET程序进行现代化改造</div>
                        <div class="intro-actions">
                            <MButton Class="gradual-btn" Text Ripple="false" Href="/stack">了解更多</MButton>
                        </div>
                    </div>
                </MCol>
                <MCol Cols="12" Lg="6" Class="cover-wrapper">
                    <MImage Src="https://cdn.masastack.com/images/banner2.png"
                            Contain
                            Eager
                            Width="@("100%")"
                            Height="@("100%")" />
                </MCol>
            </MRow>
        </MSwiperSlide>
        <MSwiperSlide>
            <MRow NoGutters Style="height: 100%">
                <MCol Cols="12" Lg="6" Class="intro-wrapper">
                    <div class="intro">
                        <div class="intro-title">.NET开发者迈向云原生&#10;如何选择？</div>
                        <div class="intro-subtitle">.NET数字化转型人才成长最优解</div>
                        <div class="intro-actions">
                            <MButton Class="gradual-btn" Text Ripple="false" Href="/framework">了解更多</MButton>
                        </div>
                    </div>
                </MCol>
                <MCol Cols="12" Lg="6" Class="cover-wrapper">
                    <MImage Src="https://cdn.masastack.com/images/banner3.png"
                            Eager
                            Contain
                            Width="@("100%")"
                            Height="@("100%")" />
                </MCol>
            </MRow>
        </MSwiperSlide>
        <MSwiperAutoplay />
        <MSwiperPagination Clickable Class="carousel-dot hidden-md-and-up" />
    </MSwiper>

    <NextView Class="hidden-md-and-up" MoreText="更多产品" />

    <div class="home-banner__slider-wrapper hidden-sm-and-down">
        <MItemGroup Value="_carouselValue"
                    ValueChanged="v => _carouselValue = v.ToInt32()"
                    ActiveClass="active">
            <MRow NoGutters Class="slider">
                <MItem>
                    <MCol Class="slider-item" Cols="4" @onclick="() => _carouselValue = 0">
                        <div class="number @context.ActiveClass">01</div>
                        <PBlockText Style="width: calc(100% - 56px)"
                                    Primary="开源企业级开发者门户 平台工程"
                                    Secondary="让开发者聚焦业务价值的实现"
                                    PrimaryClass="@($"h6 text-truncate {(context.Active ? "emphasis--text" : "regular--text")} mb-2")"
                                    SecondaryClass="@($"subtitle text-truncate {(context.Active ? "regular2--text" : "regular3--text")} ")">
                        </PBlockText>
                    </MCol>
                </MItem>
                <MItem>
                    <MCol Class="slider-item" Cols="4" @onclick="() => _carouselValue = 1">
                        <div class="number @context.ActiveClass">02</div>
                        <PBlockText Style="width: calc(100% - 56px)"
                                    Primary="传统.NET中大型项目升级宝典"
                                    Secondary="使用MASA Stack对现有.NET程序进行现代化改造"
                                    PrimaryClass="@($"h6 text-truncate {(context.Active ? "emphasis--text" : "regular--text")} mb-2")"
                                    SecondaryClass="@($"subtitle text-truncate {(context.Active ? "regular2--text" : "regular3--text")} ")">
                        </PBlockText>
                    </MCol>
                </MItem>
                <MItem>
                    <MCol Class="slider-item" Cols="4" @onclick="() => _carouselValue = 2">
                        <div class="number @context.ActiveClass">03</div>
                        <PBlockText Style="width: calc(100% - 56px)"
                                    Primary=".NET开发者迈向云原生如何选择？"
                                    Secondary=".NET数字化转型人才成长最优解"
                                    PrimaryClass="@($"h6 text-truncate {(context.Active ? "emphasis--text" : "regular--text")} mb-2")"
                                    SecondaryClass="@($"subtitle text-truncate {(context.Active ? "regular2--text" : "regular3--text")} ")">
                        </PBlockText>
                    </MCol>
                </MItem>
            </MRow>
        </MItemGroup>
    </div>
</div>

@code {

    private int _carouselValue = 0;

}
